<template>
	<div id="app" class="backf4">
    <div class="feebtype" @click="operaSelect(true)">
        <div style="color: #666666;font-size: .26rem;">意见类型</div>
        <div><span  v-text="type_value" style="font-size: .26rem;margin-right: .14rem;"></span><img src="../../../assets/img/arrow_bottom.png" class="arrow_bottom"></div>
    </div>
    <textarea class="textarea" placeholder="请输入您对我们宝贵得意见和建议" v-model="content" @input="calculateTextNumber"></textarea>
    <div style="color: #999999;margin-right: .24rem;" class="text-right"><span style="color: #FF960D;" v-text="currentTextNumber"></span>/<span v-text="allTextNumber"></span></div>
    <div class="fixed_btn center" @click="submitOpinion">提交</div>
    <mt-popup v-model="isSelect" position="bottom" style="background: rgba(0,0,0,0);">
      <div class="status_pupop center">
         <div @click="selectType(item.id,item.title)" v-for="(item,index) in Opinion" v-text="item.title">全部</div>
      </div>
    </mt-popup>
	</div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import { Popup } from 'mint-ui';  
export default {
  data() {
    return {
    	isSelect:false,
      Opinion:[],
      type:'',
      content:'',
      type_value:'',
      currentTextNumber:0,
      allTextNumber:300
    }
  },
  components:{ Popup }, 
  //已成功挂载，相当ready()
  mounted(){
    this.getOpinion();
  },
  //相关操作事件
  methods: {
      operaSelect(isSelect){
         this.isSelect = isSelect;
      },
      getOpinion(){
          common.ajax({
              type:'get',
              url:'api/complaint/type',
          }).then(res=>{
             this.Opinion = res.data;
          })
      },
      calculateTextNumber(){
        this.currentTextNumber = this.content.length;
      },
      selectType(type,title){
        this.type = type;
        this.type_value = title;
        this.operaSelect(false);
      },
      submitOpinion(){
         if(!this.type){
            common.errMessage("请选择要反馈的类型");
         }else if(!this.content){
            common.errMessage("请输入要反馈的内容");
         }else if(this.currentTextNumber>this.allTextNumber){
            common.errMessage("字数不能超过"+this.allTextNumber);
         }else{
            common.ajax({
                url:'api/complaint/opinion',
                data:{
                  type:this.type,
                  content:this.content
                }
            }).then(res=>{
               common.errMessage(res.info);
               this.content = '';
            })
         }
      }
  }
}
</script>
